<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Javascript Mi18n 国际化、本地化多语言插件</title>
    <!-- Begin Private CSS -->
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }

      body {
        font-size: 14px;
      }

      .background {
        position: fixed;
        z-index: 1;
        width: 101%;
        height: 100%;
        top: -20px;
        left: -20px;
        right: -20px;
        bottom: -20px;
      }
      .background video {
        width: 102%;
        height: 102%;
        object-fit: cover;
        filter: blur(10px);
      }

      /* scrollbar */
      ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
      }

      ::-webkit-scrollbar {
        width: 5px;
        background-color: #fff;
      }

      ::-webkit-scrollbar-thumb {
        background-color: #d00;
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
      }

      ::-moz-scrollbar-track {
        -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
      }

      ::-moz-scrollbar {
        width: 5px;
        background-color: #fff;
      }

      ::-moz-scrollbar-thumb {
        background-color: #d00;
        background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
      }

      input,
      button,
      textarea,
      select {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border-radius: 0;
        border: 1px solid #d00;
        padding: 5px 10px !important;
        background-color: #d00;
      }

      header {
        position: relative;
        z-index: 9;
        color: #fff;
        text-align: center;
        overflow: hidden;
      }

      header .banner {
        overflow: hidden;
      }

      header>div {
        overflow: hidden;
        position: relative;
      }

      header .round {
        position: absolute;
        z-index: 9;
        background-color: #17217c;
        border-radius: 100rem;
      }

      header h1 {
        position: absolute;
        z-index: 10;
        bottom: 80px;
      }

      header h1 img {
        width: 100%;
      }

      header h2 img {
        height: 30px;
        line-height: 30px;
        vertical-align: sub;
      }

      header h2 {
        position: relative;
        z-index: 11;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
      }

      header strong {
        font-size: 24px;
      }

      header h3 {
        background-color: #d00;
        opacity: 0.1;
        width: 100%;
        height: 20px;
      }

      header h4 {
        width: 100%;
        height: 10px;
        background-color: #d00;
        opacity: 0.2;
      }

      header h5 {
        width: 100%;
        height: 15px;
        background-color: #d00;
        opacity: 0.4;
      }

      header h6 {
        width: 100%;
        height: 20px;
        background-color: #d00;
        opacity: 0.6;
      }

      .code {
        padding: 10px;
        border: 1px solid #f00;
      }

      .update {
        margin-top: 10px;
        height: 150px;
        overflow-y: scroll;
      }

      xmp {
        text-align: left !important;
        padding: 5px;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
      }

      .content {
        position: absolute;
        z-index: 9;
        padding: 20px 50px;
        margin: 0 auto;
      }

      .content .google-adsense {
        padding: 20px 0;
      }

      .content a {
        color: #ff0;
      }

      .content a:hover {
        font-weight: bold;
        text-decoration: none;
      }

      .content select {
        padding: 3px;
      }

      .content input {
        padding: 3px;
      }

      .content textarea {
        padding: 3px;
      }

      .content dl {
        margin-bottom: 40px;
      }

      .content dl dt {
        font-weight: bold;
      }
      .content h1 {
        color: #FFFF00;
        font-family: kaiti;
      }
      .content h3 {
        padding: 5px 0;
        border-bottom: 5px solid #f00;
        background-color: #d00;
        color: #fff;
        padding-left: 10px;
        font-family: kaiti;
        font-size: 20px;
      }

      .content dd {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 15px;
      }

      .content dd p {
        text-align: left;
        padding: 5px 0;
      }

      .translate {
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 80px;
        line-height: 80px;
        left: 0;
        bottom: 0px;
        margin-bottom: 0 !important;
        text-align: center;
        border-top: solid 2px rgba(255, 0, 0, 0.8);
        background-color: rgba(255, 0, 0, 0.8);
        font-family: kaiti;
      }

      .translate .admin {
        color: #fff !important;
        opacity: 1 !important;
      }

      .translate .car {
        position: absolute;
        left: 10px;
        bottom: 45px;
        opacity: 0.8;
      }

      .translate .car img {
        width: 100px;
      }

      .translate .day {
        position: absolute;
        height: 60px;
        left: 20px;
      }

      .translate .day img {
        height: 60px;
      }

      .translate .current {
        font-weight: bold;
      }

      .translate dd {
        text-align: center;
      }

      .translate dd a {
        color: #fff;
        font-size: 20px;
        text-decoration: none;
        opacity: 0.6;
      }

      .translate dd a:hover {
        opacity: 0.8;
      }

      .translate dd a.current {
        font-size: 28px;
        font-weight: bold;
        color: #FFFF00;
        opacity: 1 !important;
      }

      .translate .language-list {
        display: inline-block;
      }

      #qrcodeBox {
        position: fixed;
        z-index: 999;
        right: 20px;
        bottom: 20px;
        color: #fff;
        background-color: #000;
        border: 3px solid #000;
      }

      #qrcodeBox p {
        text-align: center;
        padding: 2px 0;
      }

      footer {
      }

      footer .car {}

      footer h1 {
        font-size: 20px;
        width: 100%;
        color: #fff;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }

      footer h2 {
        background-color: #d00;
        opacity: 0.1;
        width: 100%;
        height: 10px;
      }

      footer h3 {
        background-color: #d00;
        opacity: 0.1;
        width: 100%;
        height: 20px;
      }

      footer h4 {
        width: 100%;
        height: 10px;
        background-color: #d00;
        opacity: 0.2;
      }

      footer h5 {
        width: 100%;
        height: 15px;
        background-color: #d00;
        opacity: 0.4;
      }

      footer h6 {
        width: 100%;
        height: 20px;
        background-color: #d00;
        opacity: 0.6;
      }

      .custom-zh {}

      .custom-en {}

      .custom-ja {}

      .custom-ko {}

      .custom-de {}

      .custom-fr {}

      .custom-es {}

      .banner-box {
        display: block;
        width: 240px;
        height: 50px;
        position: relative;
        font-size: 14px;
      }

      .banner-text {
        color: #000;
        font-weight: bold;
        width: 98%;
        position: absolute;
        z-index: 9;
        margin-top: 15px;
        text-align: right;
      }

      .banner-background {
        position: absolute;
      }

      .languages {
        margin: 0 auto;
        height: 500px;
        overflow-y: auto;
      }

      .languages thead {
        font-weight: bold;
        color: #ff0;
      }

      .languages td {
        padding: 5px;
        border-bottom: 1px solid #ccc;
      }
    </style>
    <script src="../jquery.min.js"></script>
    <script src="./mi18n.js"></script>
    <script>
      $(function() {
        Mi18n.config.page = window.location.pathname;
        Mi18n.config.website = null;
        Mi18n.config.autoTranslate = true;
        Mi18n.config.defaultLanguage = 'zh';
        Mi18n.config.cacheIndex = 'Mi18n';
        //Mi18n.config.insertLanguageUrl = 'https://www.520internet.com/admin/route.php?columns=api&module=language&file=language&action=insert';
        //Mi18n.config.getLanguageUrl = 'https://www.520internet.com/admin/route.php?columns=api&module=language&file=language&action=get';
        Mi18n.config.insertLanguageUrl = './admin/api.php?action=insertMi18n';
        Mi18n.config.getLanguageUrl = './admin/api.php?action=getMi18n';
        Mi18n.config.autoCollect = true;
        Mi18n.config.collectDelay = 3000;
        Mi18n.config.listenerAllMi18nsEvent = true;
        Mi18n.init();

        var language = Mi18n.cookie.get('systemLanguage') ? Mi18n.cookie.get('systemLanguage') : Mi18n
          .getLanguage();
        $.get('./admin/api.php?action=getLanguage', function(result) {
          result = JSON.parse(result);
          for (var i in result) {
            $('.translate .language-list').append('<a class="' + result[i].index +
              '" href="javascript:;" data-set-browser-language="' + result[i].index + '">' + result[i].name +
              '</a>&nbsp;&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;');
          }

          $('.translate a.' + language).addClass('current');
          $('#currentLanguage').text(Mi18n.websiteLanguage);
          $('.translate a').click(function() {
            if ($(this).attr('data-set-browser-language')) {
              $('.translate a').removeClass('current');
              $(this).addClass('current');
              Mi18n.cookie.set('systemLanguage', $(this).attr('data-set-browser-language'), '/');
              Mi18n.changeLanguage();
            }
            $('#currentLanguage').text(Mi18n.websiteLanguage);
          });
        });
        // 自动切换 banner
        function dynamicUpdateTopBanner(i) {
          var img = ['./img/banner.jpg', './img/banner_top_1.jpg', './img/banner_top_2.jpg',
            './img/banner_top_3.jpg'
          ];
          $('header div.round:eq(0)').css({
            left: 0,
            top: 0,
            width: "1px",
            height: "1px",
            opacity: 1
          }).animate({
            left: '-60%',
            top: '-150%',
            width: "50rem",
            height: "50rem",
          }, 500).animate({
            left: '-60%',
            top: '-150%',
            width: "100rem",
            height: "100rem"
          }, 1500, function() {
            $('header .banner').fadeOut(800, function() {
              $(this).attr('src', img[i]).fadeIn(1500);
              i += 1;
            });
          }).animate({
            left: '-60%',
            top: '-150%',
            width: "200rem",
            height: "200rem",
          }, 1000).animate({
            opacity: 0
          }, 500);

          $('header div.round:eq(1)').css({
            right: 0,
            top: '-150%',
            width: "1px",
            height: "1px",
            opacity: 1
          }).animate({
            right: '-60%',
            top: '-50%',
            width: "50rem",
            height: "50rem",
          }, 800).animate({
            right: '-60%',
            top: '-50%',
            width: "100rem",
            height: "100rem"
          }, 1200).animate({
            right: '-60%',
            top: '-50%',
            width: "200rem",
            height: "200rem",
          }, 800).animate({
            opacity: 0
          }, 300);

          setTimeout(function() {
            if (i >= img.length - 1) i = 0;
            dynamicUpdateTopBanner(i);
          }, 10000);
        }
        dynamicUpdateTopBanner(0);
      });
    </script>
    <!-- 百度统计 -->
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?8f034c4bc1821c0a7eb585a654c54c7a";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>

    <!-- Google Analytics -->
    <script>
      (function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function() {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
          m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
      ga('create', 'UA-35663041-1', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- Google adsense -->
    <script data-ad-client="ca-pub-8655751684012545" async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>
  <!--
  <script src="/templates/js/lib/qrcode.min.js" defer="defer"></script>
  <script id="color255Mobile" src="/m.js/mqrcode/mqrcode.js" data-set-mqrcode-config='{"bottom":"20px", "right":"20px", "close":"true", "countdown":"300", "imgSrc":"https://www.520internet.com/weixin_code.png", "title":"请我喝杯茶!"}'></script>
  -->
  <body>
    <header>
      <h1></h1>
      <div>
        <img src="/templates/images/pc/logo.png" style="width:115px; padding-top: 150px; padding-bottom: 100px;"/>
      </div>
      <h2 style="font-family: kaiti;"><strong><span style="color: yellow;">Mi18n</span>
          一款开源免费的 Javascript 国际化、本地化多语言前端插件！</strong></h2>
      <h3></h3>
      <h4></h4>
      <h5></h5>
      <h6></h6>
    </header>
    <div class="content">
      <div>
        <dl>
          <dt>
            <h3> - Mi18n 为开源免费的前端插件，用于网站实现国际化、本地化多语言！</h3>
          </dt>
          <dd>
            <p>- Mi18n 为开源免费的 i18n Javascript插件，如果你发现bug或可以优化的，发送邮件至 9592994@qq.com</p>
            <p>- <strong>版本</strong>：version 1.0.21
              &nbsp;&nbsp;.&nbsp;&nbsp;<strong>发布时间</strong>：2021年1月18日15:50:30&nbsp;&nbsp;.&nbsp;&nbsp;<strong>最近更新</strong>：2024年07月18日20:19:29
            </p>
            <p>- <strong>最新版下载</strong>：<a href="./mi18n.js" target="_blank">Mi18n</a>（1.0.21）
              <strong>Gitee</strong>：<a href="https://gitee.com/ml1023/mi18n"
                target="_blank">https://gitee.com/ml1023/mi18n</a>
            </p>
            <p>- <a href="./admin/index.html" target="_blank"><strong>配套翻译平台 1.0.3 beta（2024.02.16） 演示</strong></a>
              . <a href="./admin.rar" target="_blank"><strong>下载</strong></a> PHP+SQLite3（如果需要支持全球各种语言，需要对该系统进行修改！）</p>
            <p>- <strong>依赖</strong>：jQuery <a href="https://www.520internet.com/color/mobile/" target="_blank">演示 Vue
                中使用 Mi18n</a></p>
            <p>- <strong>翻译软件</strong>：<a href="http://www.iciba.com/" target="_blank">金山词霸</a> . <a
                href="http://www.youdao.com/" target="_blank">有道词典</a> . <a href="https://fanyi.baidu.com/home"
                target="_blank">百度翻译</a> . <a href="https://translate.google.cn/" target="_blank">谷歌翻译</a></p>
            <p>- 此技术实现方法、原理应该可以应用到软件应用程序而不仅仅 Web。</p>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - 后续将优化、改进、新增...</h3>
          </dt>
          <dd>
            <p>- 配套翻译管理系统开发中，后续提供下载使用；（已增加）</p>
            <p>- 生成并可导出翻译清单供各种软件产品使用；（已增加）</p>
            <p>- 增加缓存机制；（已增加）</p>
            <p>- 自动采集翻译内容存在缺陷；</p>
            <p>- 优化结构、优化效率；</p>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - 已经优化、改进、新增...</h3>
          </dt>
          <dd>
            <p class="update">
              - 配套翻译管理平台更新；发布时间：2024年2月16日16:39:55<br />
              &nbsp;&nbsp;增加清空全部数据；<br /><br />
              - 最新版本：1.0.21 最近更新时间：2023年08月17日02:24:57<br />
              &nbsp;&nbsp;修改 Mi18n.getLanguage() 返回数组；<br /><br />
              - 最新版本：1.0.20 最近更新时间：2022年10月23日12:34:57<br />
              &nbsp;&nbsp;优化代码；<br /><br />
              - 配套翻译平台最新版本：1.0.2 最近更新时间：2022年9月7日21:01:36<br />
              &nbsp;&nbsp;管理平台增加调用百度翻译接口；<br /><br />
              - 最新版本：1.0.19 最近更新时间：2022年8月6日22:31:58<br />
              &nbsp;&nbsp;优化代码，增加缓存；<br /><br />
              - 最新版本：1.0.18 最近更新时间：2022年4月27日21:38:30<br />
              &nbsp;&nbsp;当浏览器语言没有在已翻译语种内则使用默认语言；<br /><br />
              - 最新版本：1.0.17 最近更新时间：2022年1月22日23:39:41<br />
              &nbsp;&nbsp;新增根据语种绑定自定义Class样式；<br /><br />
              - 最新版本：1.0.16 最近更新时间：2022年1月6日17:01:02<br />
              &nbsp;&nbsp;新增自定义文本翻译内容；<br /><br />
              - 最新版本：1.0.15 最近更新时间：2021年12月23日17:16:26<br />
              &nbsp;&nbsp;优化采集需要翻译内容部分的结构；<br /><br />
              - 最新版本：1.0.14 最近更新时间：2021年12月23日05:19:23<br />
              &nbsp;&nbsp;新增链接属性修改；<br /><br />
              - 最新版本：1.0.13 最近更新时间：2021年10月20日17:16:24<br />
              &nbsp;&nbsp;新增视频演示；<br /><br />
              - 最新版本：1.0.11 最近更新时间：2021年8月19日21:51:35<br />
              &nbsp;&nbsp;增加指定语言环境隐藏元素；<br /><br />
              - 最新版本：1.0.10 最近更新时间：2021年3月12日02:11:03<br />
              &nbsp;&nbsp;修复配套翻译管理平台翻页bug；<br /><br />
              - 最新版本：1.0.10 最近更新时间：2021年3月6日22:30:23<br />
              &nbsp;&nbsp;修改查询接口bug，多平台共用接口时只查询对应平台的翻译内容。<br /><br />
              - 优化配套翻译管理平台；时间：2021年2月25日20:55:34<br /><br />
              - 最新版本：1.0.10 最近更新时间：2021年2月24日15:15:20<br />
              &nbsp;&nbsp;增加对元素属性 label="文字" 的翻译。<br /><br />
              - 最新版本：1.0.9 最近更新时间：2021年2月24日15:13:52<br />
              &nbsp;&nbsp;修改 data-set-mi18n-stop-translate="1"
              的作用，如果设置此项则不翻译该元素的值val()与文本text()，但title属性、alt、placeholder... 任然会进行翻译。<br /><br />
              - 最新版本：1.0.8 最近更新时间：2021年2月17日01:21:31<br />
              &nbsp;&nbsp;修改说明文档内关于动态修改文本与动态修改区域内容HTML的使用方法。<br /><br />
              - 最新版本：1.0.7 最近更新时间：2021年2月13日16:56:34<br />
              &nbsp;&nbsp;修复变量翻译bug。<br /><br />
              - 最新版本：1.0.7 最近更新时间：2021年2月8日13:41:57<br />
              &nbsp;&nbsp;由原有的需要翻译的组件元素设置 data-set-mi18n-translate="1"，修改为不需要翻译的组件、元素设置
              data-set-mi18n-stop-translate="1"。<br /><br />
              - 支持多平台共用一个国际化、本地化管理平台；时间：2021年2月5日14:39:53<br /><br />
              - 优化配套翻译管理平台；时间：2021年2月3日20:38:02<br /><br />
              - 配套翻译管理平台预览版已发布；发布时间：2021年2月2日08:14:55<br /><br />
              - 最新版本：1.0.6 最近更新时间：2021年1月28日02:14:14<br />
              &nbsp;&nbsp;新增对内容内包含变量的文本进行翻译。<br /><br />
              - 最新版本：1.0.5 最近更新时间：2021年1月22日10:23:28<br />
              &nbsp;&nbsp;优化效率，修改使用文档的错误与描述。<br /><br />
              - 最新版本：1.0.4 最近更新时间：2021年1月22日10:23:28<br />
              &nbsp;&nbsp;修改命名规则，i18n修改为mi18n，所有data-set-*增加data-set-mi18n<br /><br />
              - 最新版本：1.0.3 最近更新时间：2021年1月22日10:23:28<br />
              &nbsp;&nbsp;局部区域更新Bug<br /><br />
              - 最新版本：1.0.2 最近更新时间：2021年1月21日21:32:54<br />
              &nbsp;&nbsp;增加图片翻译转换，根据语言切换对应图片URL<br /><br />
              - 最新版本：1.0.1 最近更新时间：2021年1月20日00:56:10<br />
              &nbsp;&nbsp;增加内容翻译转换<br /><br />
            </p>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - 优点（最近修改：2021年8月18日19:04:46）</h3>
          </dt>
          <dd>
            <p>- 对于开发者更直观，在代码里看见的描述内容既原文，而不是key；</p>
            <p>- 主要对于许多现有项目改造实现国际化、本地化多语言，当然新项目实施也可采用此方法。</p>
            <p>- 无需在系统或平台定义繁多的标签（TEXT="文本", LANGUAGE="语言", SETTING="设置"......）进行翻译；</p>
            <p>- 大部分小项目几乎无需重构代码，只需要增加 class 以及配置 data-set 属性；</p>
            <p>- data-set-mi18n-class 属性，可以帮助设计师在界面设计部分本地化；</p>
            <p>- 无需相同页面制作多个html，极大的减少国际化、本地化多语言项目的、开发与维护成本；</p>
            <p>- 无需不同的语种制作不同的网站；如果不同语种界面样式不同可使用 data-set-mi18n-class 绑定不同样式；</p>
            <p>- 如果是Web项目，将部分运算负担交由前端完成，以减少服务器的运算负担且减少 http 请求降低服务器负担；</p>
            <p><strong>另，定制化翻译可以在不破坏界面的区域对内容进行调整！</strong></p>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - 缺点与风险（最近修改：2021年8月18日19:04:36）</h3>
          </dt>
          <dd>
            <p>- 会降低一些效率，在翻译的过程中增加了一次转换过程；</p>
            <p>- 使用 MD5 建立索引，理论上存在索引并不唯一，但一般情况不太可能出现；</p>
            <p>- 不利于SEO优化；可在页面内单独后端渲染，或单独做 SEO；</p>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - 其它</h3>
          </dt>
          <dd>
            <p>- 使用 Mi18n 网页尽量设计简单，减少 DOM 元素，使用 iFrame 提高效率；</p>
            <p>- 获取翻译结果可根据当前页标记，只返回当前页的内容，可以提高效率；</p>
            <p>- 前端可以使用 LocalStorage 或 cookie 对翻译内容进行缓存，减少请求与数据传输量；</p>
            <p>- 整站国际化、本地化多语言，前端可以根据语种调用不同语种的后端 API 接口，后端不参与任何国际化、本地化多语言页面的渲染；</p>
          </dd>
        </dl>
      </div>
      <div>
        <dl>
          <dt>
            <h1> - 演示代码</h1>
            <p><img src="./img/banner_1.jpg" width="100%" /></p>
            <h3> - 使用配置</h3>
          </dt>
          <dd>
            <p>1. Mi18n.config.autoTranslate = true; //按照浏览器语言自动替换内容</p>
            <p>2. Mi18n.config.insertLanguageUrl = 'https://www.520internet.com/language.php?action=insert';
              //配置需要翻译的内容写入接口地址</p>
            <p>3. Mi18n.config.getLanguageUrl = 'https://www.520internet.com/language.php?action=get'; // 配置获取翻译内容的接口地址
            </p>
            <p>4. 如果不需要从接口获取翻译内容，可配置翻译内容 Mi18n.config.language = '', 参看下面的接口与数据格式;</p>
            <p>5. Mi18n.config.autoCollect = true; // 是否自动采集需要翻译的内容</p>
            <p>6. Mi18n.config.collectDelay = 3000; //异步延时采集翻译内容的时间（毫秒）</p>
            <p>7. Mi18n.config.listenerAllMi18nsEvent = true; // 是否侦听所有 mi18ns 的变化，如果设置为 false 则需要将会动态修改内容元素进行单独设置;</p>
            <p>8. Mi18n.config.page = window.location.pathname; // 此设置如不为空，则只查询并返回当前页的翻译数据，如翻译数据较多可在每个页面定义不同参数;</p>
            <p>9. Mi18n.config.website = 1; 网站编号，可在管理平台“网站”中查看;</p>
            <p>10. Mi18n.websiteLanguage 为当前语种 <span id="currentLanguage"></span> 可将此参数传递至后端接口返回对应数据;</p>
            <p>11. Mi18n.cacheTime = 60*60; // 缓存时间以秒为单位，默认3600秒;</p>
            <p>12. Mi18n.config.cacheIndex = "Mi18n" // 缓存标识，默认为 document.domain;</p>
            <p>13. Mi18n.config.languages = ['zh', 'en', 'ja', 'ko', 'de', 'ru', 'fr', 'es', 'it', 'za', 'eg']; // 支持的语种
            </p>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - 接口与数据格式</h3>
          </dt>
          <dd>
            <div class="code">
              <xmp>
                --------------------- Mi18n.config.insertLanguageUrl POST 发送 JSON 数据 ---------------------
                {
                language:['中文，你好世界！', '内容', '内容'],
                  page: 'https://www.520internet.com'
                }

                --------------------- Mi18n.config.insertLanguageUrl POST 返回字符串 ---------------------
                'true' 或 'false'

                --------------------- Mi18n.config.getLanguageUrl GET 返回 JSON 数据 ---------------------
                {
                "7ccaa40b21e411cc1340a582bc5fbdc9": {
                  source_language: "中文，你好世界！",
                  zh: "中文，你好世界！",
                  en: "Chinese, hello world!",
                  de: "Chinesisch. Du bist gut!",
                  es: "¡Chino, hola mundo!",
                  fr: "Chinois, bonjour le monde!",
                  ja: "中国語、こんにちは世界!",
                  ko: "중국어, 안녕하세요!"
                  }
                }
              </xmp>
            </div>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - DEMO 代码</h3>
          </dt>
          <dd>
            <div class="code">
              <xmp rows="20" cols="100">
                // 以下代码增加至 <head>...</head>
                <script src="./jquery.min.js"></script>
                <script src="./mi18n.js"></script>
                <script>
                  $(function() {
                    // 配置翻译参数
                    Mi18n.config.page = window.location.pathname;
                    Mi18n.config.website = null;
                    Mi18n.config.autoTranslate = true;
                    Mi18n.config.defaultLanguage = 'zh';
                    Mi18n.config.cacheIndex = '520internet';
                    Mi18n.config.languages = ['zh', 'en', 'ja', 'ko', 'de', 'ru', 'fr', 'es', 'it', 'za', 'eg'];
                    Mi18n.config.insertLanguageUrl = './admin/api.php?action=insertMi18n';
                    Mi18n.config.getLanguageUrl = './admin/api.php?action=getMi18n';
                    Mi18n.config.autoCollect = true;
                    Mi18n.config.collectDelay = 3000;
                    Mi18n.config.listenerAllMi18nsEvent = true;
                    Mi18n.init();

                    // 侦听翻译按钮点击
                    $('.translate a').click(function() {
                      $('.translate a').removeClass('current');
                      $(this).addClass('current');
                      Mi18n.cookie.set('systemLanguage', $(this).attr('data-set-mi18n-language'), '/');
                      Mi18n.changeLanguage();
                    });
                  });
                </script>
                // 以下代码增加至 <body>...</body>
                <div class="translate"><a class="zh" href="javascript:;" data-set-mi18n-language="zh">中文</a> . <a
                    class="en" href="javascript:;" data-set-mi18n-language="en">English</a> . <a class="ja"
                    href="javascript:;" data-set-mi18n-language="ja">日本语</a> . <a class="ko" href="javascript:;"
                    data-set-mi18n-language="ko">한글</a></div>
              </xmp>
            </div>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - 收集需要翻译的内容</h3>
          </dt>
          <dd>
            <div class="code">
              <xmp>Mi18n.collection($('body'));</xmp>
            </div>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - 获取语种</h3>
          </dt>
          <dd>
            <div class="code">
              <xmp>
                语种：Mi18n.getLanguage()[0];
                国家：Mi18n.getLanguage()[1];
              </xmp>
            </div>
            <p>
              <script type="text/javascript">
                document.write('当前语种：' + Mi18n.getLanguage()[0] + ' - 当前国家：' + Mi18n.getLanguage()[1]);
              </script>
            </p>
          </dd>
        </dl>
        <dl>
          <dt>
            <h3> - 翻译传入文本</h3>
          </dt>
          <dd>
            <div class="code">
              <xmp>
                Mi18n.translateText('中文，你好世界！');
                Mi18n.translateText('中国語、こんにちは世界!');
              </xmp>
            </div>
            <p id="translateText1"></p>
            <p id="translateText2"></p>
            <script>
              $(function() {
                $('#translateText1').html(JSON.stringify(Mi18n.translateText('中文，你好世界！')));
                $('#translateText2').html(JSON.stringify(Mi18n.translateText('中国語、こんにちは世界!')));
              });
            </script>
          </dd>
        </dl>
      </div>
      <div>
        <dl>
          <dt>
            <h3> - 将传入文本生成唯一索引key <span style="color: yellow;">*</span></h3>
          </dt>
          <dd>
            <div class="code">
              <xmp>Mi18n.keygen('中文，你好世界！');</xmp>
            </div>
            <p>
              异于（或许是优于）其它翻译插件，不需要定义许多 key，主要一些内容较多的平台或系统、软件产品；
            <div class="code">
              <xmp>
                zh.js
                {
                  text: '文本',
                  language: '语言',
                  ......
                }
                或
                zh.js
                {
                  text000000001: '文本',
                  text000000002: '语言',
                  ......
                }
              </xmp>
            </div>
            </p>
            <p id="keygen"></p>
            <script>
              $(function() {
                $('#keygen').text(Mi18n.keygen('中文，你好世界！'));
              });
            </script>
          </dd>
        </dl>
      </div>
      <div>
        <dl>
          <dt>
            <h1>翻译文本以及表单组件</h1>
            <h3> - SELECT 下拉列表，class="mi18n" 增加至 OPTION</h3>
          </dt>
          <dd>
            <p>
            <div class="code">
              <xmp>
                <select name="select">
                  <option value="1" class="mi18n">中文，你好世界！</option>
                  <option value="1" class="mi18n" data-set-mi18n-stop-translate="1">中文，你好世界！</option>
                </select>
              </xmp>
            </div>
            </p>
            <p>
              <select name="select">
                <option value="1" class="mi18n">中文，你好世界！</option>
                <option value="1" class="mi18n" data-set-mi18n-stop-translate="1">中文，你好世界！</option>
              </select>
            </p>
          </dd>
        </dl>
        <div>
          <dl>
            <dt>
              <h3> - 指定语言环境下隐藏显示，需要在何种语言环境隐藏元素需要设置data-set-hide-with-language="en,ja,zh"</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <span class="mi18n" data-set-hide-with-language='en' data-set-mi18n-stop-translate="1">英语时隐藏该元素</span>
                  <span class="mi18n" data-set-hide-with-language='ja' data-set-mi18n-stop-translate="1">日语时隐藏该元素</span>
                  <span class="mi18n" data-set-hide-with-language='ja,en'
                    data-set-mi18n-stop-translate="1">英语、日语时隐藏该元素</span>
                </xmp>
              </div>
              </p>
              <p>
                <button class="mi18n" data-set-hide-with-language='en'
                  data-set-mi18n-stop-translate="1">英语时隐藏该元素</button>
                <button class="mi18n" data-set-hide-with-language='ja'
                  data-set-mi18n-stop-translate="1">日语时隐藏该元素</button>
                <button class="mi18n" data-set-hide-with-language='ja,en'
                  data-set-mi18n-stop-translate="1">英语、日语时隐藏该元素</button>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 动态修改文本</h3>
            </dt>
            <dd id="dynamicUpdate-1">
              <div class="code">
                <xmp>
                  <div id="content" class="mi18n">梦想</div>
                  <script>
                    $(function() {
                      $('#content').text('中文，你好世界！');
                    });
                  </script>
                </xmp>
              </div>
              <p>
                点击修改的原文：<strong>中文，你好世界！</strong> - 翻译后：<strong><span class="mi18n">中文，你好世界！</span></strong>
              </p>
              <p>
                自动修改的原文：<strong></strong> - 翻译后：<strong class="mi18n"></strong>
              </p>
              <p>
                <script>
                  function dynamicUpdate1() {
                    $('#dynamicUpdate-1 p:eq(0) strong:eq(0)').text('梦想');
                    $('#dynamicUpdate-1 p:eq(0) strong:eq(1) span').html('梦想');
                  }

                  function resetDynamicUpdate1() {
                    $('#dynamicUpdate-1 p:eq(0) strong:eq(0)').text('中文，你好世界！');
                    $('#dynamicUpdate-1 p:eq(0) strong:eq(1) span').html('中文，你好世界！');
                  }
                  $(function() {
                    // 自动修改内容
                    function dynamicUpdate(i) {
                      var text = ['美国', '中国', '家庭', '梦想'];
                      $('#dynamicUpdate-1 p:eq(1) strong:eq(0)').text(text[i]);
                      $('#dynamicUpdate-1 p:eq(1) strong:eq(1)').html(text[i]);
                      i += 1;
                      setTimeout(function() {
                        if (i > text.length - 1) i = 0;
                        dynamicUpdate(i);
                      }, 3000);
                    }
                    dynamicUpdate(0);
                  });
                </script>
                <input type="button" value="修改内容" onclick="dynamicUpdate1();" />
                <input type="button" value="重置内容" onclick="resetDynamicUpdate1();" />
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 动态修改区域内容HTML，<strong>重点！</strong>当某区域内容会动态修改，需要增加 class="mi18ns"，例如一些管理平台内会使用到 HTML 编辑器修改内容，前端动态载入
                innerHTML 内容至显示区域。<span style="color: yellow;">此设置慎用，会降低效率。</span></h3>
            </dt>
            <dd id="dynamicUpdate-2">
              <div class="code">
                <xmp>
                  <div id="content" class="mi18ns"></div>
                  <script>
                    $(function() {
                      $('#content').html('<span class="mi18n">中文，你好世界！</span>');
                    });
                  </script>
                </xmp>
              </div>
              <p class="preview">
                点击修改的原文：<strong>中文，你好世界！</strong> - 翻译后：<strong class="mi18ns"><span
                    class="mi18n">中文，你好世界！</span></strong>
              </p>
              <p>
                自动修改的原文：<strong>梦想</strong> - 翻译后：<strong class="mi18ns"></strong>
              </p>
              <p>
                <script>
                  $('#dynamicUpdate-2 p:eq(0) strong:eq(0)').text('<span class="mi18n">中文，你好世界！</span>');

                  function dynamicUpdate2() {
                    $('#dynamicUpdate-2 p:eq(0) strong:eq(0)').text('<span class="mi18n">梦想</span>');
                    $('#dynamicUpdate-2 p:eq(0) strong:eq(1)').html('<span class="mi18n">梦想</span>');
                  }

                  function dynamicUpdate21() {
                    $('#dynamicUpdate-2 p:eq(0) strong:eq(0) span').text('中国');
                    $('#dynamicUpdate-2 p:eq(0) strong:eq(1) span').text('中国');
                  }

                  function resetDynamicUpdate2() {
                    $('#dynamicUpdate-2 p:eq(0) strong:eq(0)').text('<span class="mi18n">中文，你好世界！</span>');
                    $('#dynamicUpdate-2 p:eq(0) strong:eq(1)').html('<span class="mi18n">中文，你好世界！</span>');
                  }

                  $(function() {
                    function dynamicUpdate2(i) {
                      var text = ['美国', '中国', '家庭', '梦想'];
                      $('#dynamicUpdate-2 p:eq(1) strong:eq(0)').text('<span class="mi18n">' + text[i] + '</span>');
                      $('#dynamicUpdate-2 p:eq(1) strong:eq(1)').html('<span class="mi18n">' + text[i] + '</span>');
                      i += 1;
                      setTimeout(function() {
                        if (i > text.length - 1) i = 0;
                        dynamicUpdate2(i);
                      }, 2000);
                    }
                    dynamicUpdate2(0);
                  });
                </script>
                <input type="button" value="替换DIV中的SPAN" onclick="dynamicUpdate2();" />
                <input type="button" value="修改DIV中SPAN的内容" onclick="dynamicUpdate21();" />
                <input type="button" value="重置DIV的内容" onclick="resetDynamicUpdate2();" />
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - TEXT包含变量，文本内包含变量需要定义 class="mi18n-var"，如果该变量不需要动态翻译需设置 data-set-mi18n-stop-translate="1"。<span
                  style="color: yellow;">此设置会提高效率。</span></h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <ins class="mi18n" id="country">中文，你喜欢<i class="mi18n-var"></i>吗？你去过<i class="mi18n-var"></i>吗？</ins>
                  // 翻译全部变量<br />
                  <ins class="mi18n" id="countrys">中文，你喜欢<i class="mi18n-var"
                      data-set-mi18n-stop-translate="1"></i>吗？你去过<i class="mi18n-var"></i>吗？</ins> //部分变量不翻译<br />
                  <ins class="mi18n" id="milliseconds">中文，现在时间是：<i class="mi18n-var"
                      data-set-mi18n-stop-translate="1"></i>，你好世界！</ins> // 提高效率不翻译不需要翻译的
                  <script>
                    $(function() {
                      function dynamicUpdateCountry(i) {
                        var text = ['美国', '中国'],
                          text1 = ['中国', '美国'];
                        $('#country .mi18n-var:eq(0)').html(text[i]);
                        $('#country .mi18n-var:eq(1)').html(text1[i]);
                        i += 1;
                        setTimeout(function() {
                          if (i > text.length - 1) i = 0;
                          dynamicUpdateCountry(i);
                        }, 3000);
                      }
                      dynamicUpdateCountry(0);

                      function dynamicUpdateCountry1(i) {
                        var text = ['美国', '中国'],
                          text1 = ['中国', '美国'];
                        $('#countrys .mi18n-var:eq(0)').html(text[i]);
                        $('#countrys .mi18n-var:eq(1)').html(text1[i]);
                        i += 1;
                        setTimeout(function() {
                          if (i > text.length - 1) i = 0;
                          dynamicUpdateCountry1(i);
                        }, 3000);
                      }
                      dynamicUpdateCountry1(0);
                      setInterval(function() {
                        var d = new Date();
                        var n = d.getTime();
                        $('#milliseconds i').text(n);
                      }, 10);
                    });
                  </script>
                </xmp>
              </div>
              </p>
              <p>
                <ins class="mi18n" id="country">中文，你喜欢<i class="mi18n-var"></i>吗？你去过<i class="mi18n-var"></i>吗？</ins> //
                翻译全部变量<br />
                <ins class="mi18n" id="countrys">中文，你喜欢<i class="mi18n-var"
                    data-set-mi18n-stop-translate="1"></i>吗？你去过<i class="mi18n-var"></i>吗？</ins> //部分变量不翻译<br />
                <ins class="mi18n" id="milliseconds">中文，现在时间是：<i class="mi18n-var"
                    data-set-mi18n-stop-translate="1"></i>，你好世界！</ins> // 提高效率不翻译不需要翻译的
                <script>
                  $(function() {
                    function dynamicUpdateCountry(i) {
                      var text = ['美国', '中国'],
                        text1 = ['中国', '美国'];
                      $('#country .mi18n-var:eq(0)').html(text[i]);
                      $('#country .mi18n-var:eq(1)').html(text1[i]);
                      i += 1;
                      setTimeout(function() {
                        if (i > text.length - 1) i = 0;
                        dynamicUpdateCountry(i);
                      }, 3000);
                    }
                    dynamicUpdateCountry(0);

                    function dynamicUpdateCountry1(i) {
                      var text = ['美国', '中国'],
                        text1 = ['中国', '美国'];
                      $('#countrys .mi18n-var:eq(0)').html(text[i]);
                      $('#countrys .mi18n-var:eq(1)').html(text1[i]);
                      i += 1;
                      setTimeout(function() {
                        if (i > text.length - 1) i = 0;
                        dynamicUpdateCountry1(i);
                      }, 3000);
                    }
                    dynamicUpdateCountry1(0);
                    setInterval(function() {
                      var d = new Date();
                      var n = d.getTime();
                      $('#milliseconds i').text(n);
                    }, 10);
                  });
                </script>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - INPUT TEXT，不需要翻译的INPUT TEXT需要增加 data-set-mi18n-stop-translate="1"</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <input type="text" class="mi18n" value="中文，你好世界！" data-set-mi18n-stop-translate="1" /> //不需要翻译此表单元素的值
                  <input type="text" class="mi18n" value="中文，你好世界！" />
                  <input type="text" id="changePlaceholder" class="mi18n" value="" placeholder="中文，你好世界！" />
                  // 方法一，修改input元素的placeholder，必须使用removeAttr先删除 placeholder 再设置成其它值
                  <input type="button" value="方法一,修改 Placeholder"
                    onclick="$('#changePlaceholder').removeAttr('placeholder').attr('placeholder', '美国')" />
                  // 方法二，使用 Mi18n.translateText 修改input元素的placeholder
                  <script>
                    function changeInputPlaceholder() {
                      $('#changePlaceholder').attr('placeholder', Mi18n.translateText('中国')[Mi18n.websiteLanguage]);
                    }
                  </script>
                  <input type="button" value="方法二,修改 Placeholder" onclick="changeInputPlaceholder();" />
                  <input type="button" value="重置 Placeholder"
                    onclick="$('#changePlaceholder').removeAttr('placeholder').attr('placeholder', '中文，你好世界！')" />
                </xmp>
              </div>
              </p>
              <p>
                <input type="text" class="mi18n" value="中文，你好世界！" data-set-mi18n-stop-translate="1" />&nbsp;&nbsp;
                <input type="text" class="mi18n" value="中文，你好世界！" /><br /><br />
                <input type="text" id="changePlaceholder" class="mi18n" value="" placeholder="中文，你好世界！" />&nbsp;&nbsp;
                <input type="button" value="方法一,修改 Placeholder"
                  onclick="$('#changePlaceholder').removeAttr('placeholder').attr('placeholder', '美国')" />
                <script>
                  function changeInputPlaceholder() {
                    $('#changePlaceholder').attr('placeholder', Mi18n.translateText('中国')[Mi18n.websiteLanguage]);
                  }
                </script>
                <input type="button" value="方法二,修改 Placeholder" onclick="changeInputPlaceholder();" />
                <input type="button" value="重置 Placeholder"
                  onclick="$('#changePlaceholder').removeAttr('placeholder').attr('placeholder', '中文，你好世界！')" />
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - alter</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  var result = Mi18n.translateText('中文，你好世界！');
                  var websiteLanguage = Mi18n.cookie.get('systemLanguage') ? Mi18n.cookie.get('systemLanguage') :
                  Mi18n.defaultLanguage;
                  alert(result[websiteLanguage]);
                </xmp>
              </div>
              </p>
              <p>
                <script>
                  $(function() {
                    var result = Mi18n.translateText('中文，你好世界！');
                    $('#alert').click(function() {
                      var websiteLanguage = Mi18n.cookie.get('systemLanguage') ? Mi18n.cookie.get(
                        'systemLanguage') : Mi18n.defaultLanguage;
                      alert(result[websiteLanguage]);
                    });
                  });
                </script>
                <input type="button" value="alert" id="alert" />
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - confirm</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <script>
                    $(function() {
                      function confirms() {
                        var websiteLanguage = Mi18n.cookie.get('systemLanguage') ? Mi18n.cookie.get(
                          'systemLanguage') : Mi18n.defaultLanguage;
                        var msg = Mi18n.translateText('中文，你好世界！');
                        if (confirm(msg[websiteLanguage]) == true) {
                          return true;
                        } else {
                          return false;
                        }
                      }
                      $('#confirms').click(function() {
                        confirms();
                      });
                    });
                  </script>
                  <input type="button" value="confirms" id="confirms" />
                </xmp>
              </div>
              </p>
              <p>
                <script>
                  $(function() {
                    function confirms() {
                      var websiteLanguage = Mi18n.cookie.get('systemLanguage') ? Mi18n.cookie.get(
                        'systemLanguage') : Mi18n.defaultLanguage;
                      var msg = Mi18n.translateText('中文，你好世界！');
                      if (confirm(msg[websiteLanguage]) == true) {
                        return true;
                      } else {
                        return false;
                      }
                    }
                    $('#confirms').click(function() {
                      confirms();
                    });
                  });
                </script>
                <input type="button" value="confirms" id="confirms" />
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - TEXTAREA 文本区域</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <textarea class="mi18n" alt="中文，你好世界！" data-set-mi18n-stop-translate="1">中文，你好世界！</textarea>
                  <textarea class="mi18n" alt="中文，你好世界！">中文，你好世界！</textarea>
                  <textarea class="mi18n" placeholder="中文，你好世界！" alt="中文，你好世界！"></textarea>
                </xmp>
              </div>
              </p>
              <p><textarea class="mi18n" alt="中文，你好世界！" data-set-mi18n-stop-translate="1">中文，你好世界！</textarea></p>
              <p><textarea class="mi18n" alt="中文，你好世界！">中文，你好世界！</textarea></p>
              <p><textarea class="mi18n" placeholder="中文，你好世界！" alt="中文，你好世界！"></textarea></p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - BUTTON 按钮</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <input type="button" class="mi18n" value="中文，你好世界！" data-set-mi18n-stop-translate="1" />
                  <input type="button" class="mi18n" value="中文，你好世界！" />
                </xmp>
              </div>
              </p>
              <p>
                <input type="button" class="mi18n" value="中文，你好世界！" data-set-mi18n-stop-translate="1" />
                <input type="button" class="mi18n" value="中文，你好世界！" />
              </p>
              <p>
              <div class="code">
                <xmp>
                  <button class="mi18n" data-set-mi18n-stop-translate="1">中文，你好世界！</button>
                  <button class="mi18n">中文，你好世界！</button>
                </xmp>
              </div>
              </p>
              <p>
                <button class="mi18n" data-set-mi18n-stop-translate="1">中文，你好世界！</button>
                <button class="mi18n">中文，你好世界！</button>
              </p>
              <div class="code">
                <xmp>
                  <button class="mi18n"
                    data-set-mi18n-language='{"zh":"* 中文，你好世界！", "en":"* Chinese, hello world!", "ja":"* 中国語、こんにちは世界!", "ko":"* 중국어, 안녕하세요!", "de":"* Chinesisch. Du bist gut!", "fr":"* Chinois, bonjour le monde!", "es":"* ¡Chino, hola mundo!"}'>中文，你好世界！</button>
                </xmp>
              </div>
              </p>
              <p>
                <button class="mi18n"
                  data-set-mi18n-language='{"zh":"* 中文，你好世界！", "en":"* Chinese, hello world!", "ja":"* 中国語、こんにちは世界!", "ko":"* 중국어, 안녕하세요!", "de":"* Chinesisch. Du bist gut!", "fr":"* Chinois, bonjour le monde!", "es":"* ¡Chino, hola mundo!"}'>中文，你好世界！</button>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 文本</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <div class="mi18n" title="中文，你好世界！" data-set-mi18n-stop-translate="1">中文，你好世界！</div>
                  <ins class="mi18n" title="中文，你好世界！">中文，你好世界！</ins>
                  <span class="mi18n" title="中文，你好世界！">中文，你好世界！</span>
                  <a class="mi18n" title="中文，你好世界！">中文，你好世界！</a>
                </xmp>
              </div>
              </p>
              <p>
              <div class="mi18n" title="中文，你好世界！" data-set-mi18n-stop-translate="1">中文，你好世界！</div><br />
              <ins class="mi18n">中文，你好世界！</ins><br />
              <span class="mi18n" title="中文，你好世界！">中文，你好世界！</span><br />
              <a class="mi18n" title="中文，你好世界！">中文，你好世界！</a>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 自定义文本翻译内容，如果 data-set-language 属性有定义则优先选择该翻译内容。</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <a class="mi18n" title="中文，你好世界！"
                    data-set-mi18n-language='{"zh":"* 中文，你好世界！", "en":"* Chinese, hello world!", "ja":"* 中国語、こんにちは世界!", "ko":"* 중국어, 안녕하세요!", "de":"* Chinesisch. Du bist gut!", "fr":"* Chinois, bonjour le monde!", "es":"* ¡Chino, hola mundo!"}'>中文，你好世界！</a>
                </xmp>
              </div>
              </p>
              <p>
                <a class="mi18n" title="中文，你好世界！"
                  data-set-mi18n-language='{"zh":"* 中文，你好世界！", "en":"* Chinese, hello world!", "ja":"* 中国語、こんにちは世界!", "ko":"* 중국어, 안녕하세요!", "de":"* Chinesisch. Du bist gut!", "fr":"* Chinois, bonjour le monde!", "es":"* ¡Chino, hola mundo!"}'>中文，你好世界！</a>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 链接</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <a class="mi18n" title="中文，你好世界！" href="./"
                    data-set-mi18n-href='{"zh":"./#zh", "en":"./#en", "ja":"./#ja", "ko":"./#ko", "de":"./#de", "fr":"./#fr", "es":"./#es"}'>中文，你好世界！</a>
                </xmp>
              </div>
              </p>
              <p>
                <a class="mi18n" title="中文，你好世界！" href="./"
                  data-set-mi18n-href='{"zh":"./#zh", "en":"./#en", "ja":"./#ja", "ko":"./#ko", "de":"./#de", "fr":"./#fr", "es":"./#es"}'>中文，你好世界！</a>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 绑定 class，根据不同语种绑定对应的 class CSS样式</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <a class="mi18n" title="中文，你好世界！"
                    data-set-mi18n-class='{"zh":"custom-zh", "en":"custom-en", "ja":"custom-ja", "ko":"custom-ko", "de":"custom-de", "fr":"custom-fr", "es":"custom-es"}'>中文，你好世界！</a>
                </xmp>
              </div>
              </p>
              <p>
                <a class="mi18n" title="中文，你好世界！"
                  data-set-mi18n-class='{"zh":"custom-zh", "en":"custom-en", "ja":"custom-ja", "ko":"custom-ko", "de":"custom-de", "fr":"custom-fr", "es":"custom-es"}'>中文，你好世界！</a>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - iframe 内容同步翻译</h3>
            </dt>
            <dd>
              <div class="code">
                <xmp>
                  // iframe 子窗口增加监听父窗口变量变化或元素变化即可
                  $(parent.document).find('.translate a').click(function(event) {
                    Mi18n.changeLanguage();
                  });
                </xmp>
              </div>
              </p>
              <p>
                <iframe src="iframe.html" width="100%" height="150"
                  style="box-sizing: border-box; padding: 10px; border: 1px solid #d00;"></iframe>
              </p>
              <p>
                可以在 iframe 内增加 setinterval 定时监听父窗口的语种变化，当监测到语种变化则自动翻译 iframe 窗口内的内容！<br />
                如对效率有较高要求，可以单独绑定监听事件！<br />
                Mi18n.bindMi18nsEvent($(element, iframe));<br />
                Mi18n.bindMi18nEvent($(element, iframe));<br />
                Mi18n.translate($(element, iframe));
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 图片，需要设置 data-set-mi18n-src，<strong>重点！</strong>在设置 data-set-mi18n-src
                时注意单'双"引号的使用，data-set-mi18n-src='{"zh":"./img/zh.png"}'</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp><img src="./img/zh.png"
                    data-set-mi18n-src='{"zh":"./img/zh.png", "en":"./img/en.png", "ja":"./img/ja.png", "ko":"./img/ko.png", "de":"./img/de.png", "fr":"./img/fr.png", "es":"./img/es.png"}'
                    class="mi18n" /></xmp>
              </div>
              </p>
              <p>
                <img src="./img/zh.png"
                  data-set-mi18n-src='{"zh":"./img/zh.png", "en":"./img/en.png", "ja":"./img/ja.png", "ko":"./img/ko.png", "de":"./img/de.png", "fr":"./img/fr.png", "es":"./img/es.png"}'
                  class="mi18n" />
              </p>
            </dd>
            <dt>
              <h3> - 背景图片，需要设置 data-set-mi18n-translate-background="1" 以及 data-set-mi18n-src</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <span
                    style="display: inline-block; width:240px; height:50px; background-image: url('./img/zh.png');"
                    data-set-mi18n-translate-background="1"
                    data-set-mi18n-src='{"zh":"./img/zh.png", "en":"./img/en.png", "ja":"./img/ja.png", "ko":"./img/ko.png", "de":"./img/de.png", "fr":"./img/fr.png", "es":"./img/es.png"}'
                    class="mi18n"></span>
                </xmp>
              </div>
              </p>
              <p>
                <span style="display: inline-block; width:240px; height:50px; background-image: url('./img/zh.png');"
                  data-set-mi18n-translate-background="1"
                  data-set-mi18n-src='{"zh":"./img/zh.png", "en":"./img/en.png", "ja":"./img/ja.png", "ko":"./img/ko.png", "de":"./img/de.png", "fr":"./img/fr.png", "es":"./img/es.png"}'
                  class="mi18n"></span>
              </p>
            </dd>
            <dt>
              <h3> - Banner 一些 Banner 图片的翻译可以将图片与文字分层</h3>
            </dt>
            <dd>
              <p>
              <div class="banner-box">
                <span class="banner-text mi18n">中文，你好世界！</span>
                <img class="banner-background" src="./img/none.png" />
              </div>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 视频，需要设置 data-set-mi18n-src，<strong>重点！</strong>在设置 data-set-mi18n-src
                时注意单'双"引号的使用，data-set-mi18n-src='{"zh":"./video/zh.mp4"}'</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  <video class="mi18n" src="./video/zh.mp4" autoplay="autoplay" width="300" controls="controls"
                    data-set-mi18n-src='{"zh":"./video/zh.mp4", "en":"./video/en.mp4", "ja":"./video/ja.mp4", "ko":"./video/ko.mp4", "de":"./video/de.mp4", "fr":"./video/fr.mp4", "es":"./video/es.mp4"}'>
                  </video>
                </xmp>
              </div>
              </p>
              <p>
                <video class="mi18n" src="./video/zh.mp4" autoplay="autoplay" width="300" controls="controls"
                  data-set-mi18n-src='{"zh":"./video/zh.mp4", "en":"./video/en.mp4", "ja":"./video/ja.mp4", "ko":"./video/ko.mp4", "de":"./video/de.mp4", "fr":"./video/fr.mp4", "es":"./video/es.mp4"}'></video>
              </p>
              <!--<p><audio id="music" controls="controls" loop="loop" src="/music/start.mp3" autoplay="1"
                  style="display: none;"></audio></p>-->
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - Vue 中使用 Mi18n，需要引入 jQuery</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  # main.js 文件引入 jQuery与Mi18n

                  import $ from '../static/jquery-vendor.js'
                  import Mi18n from '../static/mi18n.js'
                  Vue.prototype.Mi18n = Mi18n

                  #App.vue 组件内配置 Mi18n
                  mounted: function() {
                    var _this = this;
                    _this.Mi18n.config.page = ''; //window.location.pathname;
                    _this.Mi18n.config.website = null;
                    _this.Mi18n.config.autoTranslate = true;
                    _this.Mi18n.config.defaultLanguage = 'zh';
                    _this.Mi18n.config.Languages = ['zh', 'en', 'ja', 'ko', 'de', 'ru', 'fr', 'es', 'it', 'za', 'eg'];
                    _this.Mi18n.config.insertLanguageUrl = this.domain +'/color/mi18n/admin/api.php?action=insertMi18n';
                    _this.Mi18n.config.getLanguageUrl = this.domain +'/color/mi18n/admin/api.php?action=getMi18n';
                    _this.Mi18n.config.autoCollect = true;
                    _this.Mi18n.config.collectDelay = 3000;
                    _this.Mi18n.config.listenerAllMi18nsEvent = true;
                    _this.Mi18n.config.cacheIndex = "520internet";
                    _this.Mi18n.init();

                    _this.language = this.Mjs(1.0).cookie.get('systemLanguage') ? Mjs(1.0).cookie.get('systemLanguage') :
                    this.Mjs(1.0).client.browser.language.name();
                    this.$store.commit('changeWebsiteLanguage', { websiteLanguage: _this.language });
                    ......
                    ......
                    ......
                  },
                  updated: function() {
                    this.Mi18n.changeLanguage();
                    ......
                    ......
                  }
                </xmp>
              </div>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 另，多版本加载！</h3>
            </dt>
            <dd>
              <p>
              <div class="code">
                <xmp>
                  /**
                  * 你可以在此基础上进行补充或增加新版本，然后按照版本号加载多版本以实现扩展或多版本兼容。
                  * @example
                    Mi18n.changeLanguage();
                    Mi18n(1.0).changeLanguage();
                  **/

                  /*
                  function Mi18n(ver) {
                    ver = ver ? ver.toString().replaceAll('.', '_') : '';
                    console.log(ver);
                    if (typeof window['Mi18n_' + ver] == 'object') {
                      return window['Mi18n_' + ver];
                    } else {
                      return Mi18n;
                    }
                  }
                  */
                </xmp>
              </div>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <h3> - 各国家语言代码对照表</h3>
            </dt>
            <dd style="max-height: 300px; overflow-y: scroll;">
              <p>
              <table class="languages">
                <thead>
                  <tr>
                    <td width="15.5%">语言代码</td>
                    <td width="20%">国家/地区</td>
                    <td width="17%">语言代码</td>
                    <td width="20%">国家/地区</td>
                    <td width="15.5%">语言代码</td>
                    <td width="20%">国家/地区</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>af</td>
                    <td>公用荷兰语</td>

                    <td>af-ZA</td>
                    <td>公用荷兰语 - 南非</td>

                    <td>sq</td>
                    <td>阿尔巴尼亚</td>
                  </tr>
                  <tr>
                    <td>sq-AL</td>
                    <td>阿尔巴尼亚 -阿尔巴尼亚</td>

                    <td>ar</td>
                    <td>阿拉伯语</td>

                    <td>ar-DZ</td>
                    <td>阿拉伯语 -阿尔及利亚</td>
                  </tr>
                  <tr>
                    <td>ar-BH</td>
                    <td>阿拉伯语 -巴林</td>

                    <td>ar-EG</td>
                    <td>阿拉伯语 -埃及</td>

                    <td>ar-IQ</td>
                    <td>阿拉伯语 -伊拉克</td>
                  </tr>
                  <tr>
                    <td>ar-JO</td>
                    <td>阿拉伯语 -约旦</td>

                    <td>ar-KW</td>
                    <td>阿拉伯语 -科威特</td>

                    <td>ar-LB</td>
                    <td>阿拉伯语 -黎巴嫩</td>
                  </tr>
                  <tr>
                    <td>ar-LY</td>
                    <td>阿拉伯语 -利比亚</td>

                    <td>ar-MA</td>
                    <td>阿拉伯语 -摩洛哥</td>

                    <td>ar-OM</td>
                    <td>阿拉伯语 -阿曼</td>
                  </tr>
                  <tr>
                    <td>ar-QA</td>
                    <td>阿拉伯语 -卡塔尔</td>

                    <td>ar-SA</td>
                    <td>阿拉伯语 - 沙特阿拉伯</td>

                    <td>ar-SY</td>
                    <td>阿拉伯语 -叙利亚共和国</td>
                  </tr>
                  <tr>
                    <td>ar-TN</td>
                    <td>阿拉伯语 -北非的共和国</td>

                    <td>ar-AE</td>
                    <td>阿拉伯语 - 阿拉伯联合酋长国</td>

                    <td>ar-YE</td>
                    <td>阿拉伯语 -也门</td>
                  </tr>
                  <tr>
                    <td>hy</td>
                    <td>亚美尼亚</td>

                    <td>hy-AM</td>
                    <td>亚美尼亚的 -亚美尼亚</td>

                    <td>az</td>
                    <td>Azeri</td>
                  </tr>
                  <tr>
                    <td>az-AZ-Cyrl</td>
                    <td>Azeri-(西里尔字母的) 阿塞拜疆</td>

                    <td>az-AZ-Latn</td>
                    <td>Azeri(拉丁文)- 阿塞拜疆</td>

                    <td>eu</td>
                    <td>巴斯克</td>
                  </tr>
                  <tr>
                    <td>eu-ES</td>
                    <td>巴斯克 -巴斯克</td>

                    <td>be</td>
                    <td>Belarusian</td>

                    <td>be-BY</td>
                    <td>Belarusian-白俄罗斯</td>
                  </tr>
                  <tr>
                    <td>bg</td>
                    <td>保加利亚</td>

                    <td>bg-BG</td>
                    <td>保加利亚 -保加利亚</td>

                    <td>ca</td>
                    <td>嘉泰罗尼亚</td>
                  </tr>
                  <tr>
                    <td>ca-ES</td>
                    <td>嘉泰罗尼亚 -嘉泰罗尼亚</td>

                    <td>zh-HK</td>
                    <td>华 - 香港的 SAR</td>

                    <td>zh-MO</td>
                    <td>华 - 澳门的 SAR</td>
                  </tr>
                  <tr>
                    <td>zh-CN</td>
                    <td>华 -中国</td>

                    <td>zh-CHS</td>
                    <td>华 (单一化)</td>

                    <td>zh-SG</td>
                    <td>华 -新加坡</td>
                  </tr>
                  <tr>
                    <td>zh-TW</td>
                    <td>华 -中国台湾</td>

                    <td>zh-CHT</td>
                    <td>华 (传统的)</td>

                    <td>hr</td>
                    <td>克罗埃西亚</td>
                  </tr>
                  <tr>
                    <td>hr-HR</td>
                    <td>克罗埃西亚 -克罗埃西亚</td>

                    <td>cs</td>
                    <td>捷克</td>

                    <td>cs-CZ</td>
                    <td>捷克 - 捷克</td>
                  </tr>
                  <tr>
                    <td>da</td>
                    <td>丹麦文</td>

                    <td>da-DK</td>
                    <td>丹麦文 -丹麦</td>

                    <td>div</td>
                    <td>Dhivehi</td>
                  </tr>
                  <tr>
                    <td>div-MV</td>
                    <td>Dhivehi-马尔代夫</td>

                    <td>nl</td>
                    <td>荷兰</td>

                    <td>nl-BE</td>
                    <td>荷兰 -比利时</td>
                  </tr>
                  <tr>
                    <td>nl-NL</td>
                    <td>荷兰 - 荷兰</td>

                    <td>en</td>
                    <td>英国</td>

                    <td>en-AU</td>
                    <td>英国 -澳洲</td>
                  </tr>
                  <tr>
                    <td>en-BZ</td>
                    <td>英国 -伯利兹</td>

                    <td>en-CA</td>
                    <td>英国 -加拿大</td>

                    <td>en-CB</td>
                    <td>英国 -加勒比海</td>
                  </tr>
                  <tr>
                    <td>en-IE</td>
                    <td>英国 -爱尔兰</td>

                    <td>en-JM</td>
                    <td>英国 -牙买加</td>

                    <td>en-NZ</td>
                    <td>英国 - 新西兰</td>
                  </tr>
                  <tr>
                    <td>en-PH</td>
                    <td>英国 -菲律宾共和国</td>

                    <td>en-ZA</td>
                    <td>英国 - 南非</td>

                    <td>en-TT</td>
                    <td>英国 - 千里达托贝哥共和国</td>
                  </tr>
                  <tr>
                    <td>en-GB</td>
                    <td>英国 - 英国</td>

                    <td>en-US</td>
                    <td>英国 - 美国</td>

                    <td>en-ZW</td>
                    <td>英国 -津巴布韦</td>
                  </tr>
                  <tr>
                    <td>et</td>
                    <td>爱沙尼亚</td>

                    <td>et-EE</td>
                    <td>爱沙尼亚的 -爱沙尼亚</td>

                    <td>fo</td>
                    <td>Faroese</td>
                  </tr>
                  <tr>
                    <td>fo-FO</td>
                    <td>Faroese- 法罗群岛</td>

                    <td>fa</td>
                    <td>波斯语</td>

                    <td>fa-IR</td>
                    <td>波斯语 -伊朗王国</td>
                  </tr>
                  <tr>
                    <td>fi</td>
                    <td>芬兰语</td>

                    <td>fi-FI</td>
                    <td>芬兰语 -芬兰</td>

                    <td>fr</td>
                    <td>法国</td>
                  </tr>
                  <tr>
                    <td>fr-BE</td>
                    <td>法国 -比利时</td>

                    <td>fr-CA</td>
                    <td>法国 -加拿大</td>

                    <td>fr-FR</td>
                    <td>法国 -法国</td>
                  </tr>
                  <tr>
                    <td>fr-LU</td>
                    <td>法国 -卢森堡</td>

                    <td>fr-MC</td>
                    <td>法国 -摩纳哥</td>

                    <td>fr-CH</td>
                    <td>法国 -瑞士</td>
                  </tr>
                  <tr>
                    <td>gl</td>
                    <td>加利西亚</td>

                    <td>gl-ES</td>
                    <td>加利西亚 -加利西亚</td>

                    <td>ka</td>
                    <td>格鲁吉亚州</td>
                  </tr>
                  <tr>
                    <td>ka-GE</td>
                    <td>格鲁吉亚州 -格鲁吉亚州</td>

                    <td>de</td>
                    <td>德国</td>

                    <td>de-AT</td>
                    <td>德国 -奥地利</td>
                  </tr>
                  <tr>
                    <td>de-DE</td>
                    <td>德国 -德国</td>

                    <td>de-LI</td>
                    <td>德国 -列支敦士登</td>

                    <td>de-LU</td>
                    <td>德国 -卢森堡</td>
                  </tr>
                  <tr>
                    <td>de-CH</td>
                    <td>德国 -瑞士</td>

                    <td>el</td>
                    <td>希腊</td>

                    <td>el-GR</td>
                    <td>希腊 -希腊</td>
                  </tr>
                  <tr>
                    <td>gu</td>
                    <td>Gujarati</td>

                    <td>gu-IN</td>
                    <td>Gujarati-印度</td>

                    <td>he</td>
                    <td>希伯来</td>
                  </tr>
                  <tr>
                    <td>he-IL</td>
                    <td>希伯来 -以色列</td>

                    <td>hi</td>
                    <td>北印度语</td>

                    <td>hi-IN</td>
                    <td>北印度的 -印度</td>
                  </tr>
                  <tr>
                    <td>hu</td>
                    <td>匈牙利</td>

                    <td>hu-HU</td>
                    <td>匈牙利的 -匈牙利</td>

                    <td>is</td>
                    <td>冰岛语</td>
                  </tr>
                  <tr>
                    <td>is-IS</td>
                    <td>冰岛的 -冰岛</td>

                    <td>id</td>
                    <td>印尼</td>

                    <td>id-ID</td>
                    <td>印尼 -印尼</td>
                  </tr>
                  <tr>
                    <td>it</td>
                    <td>意大利</td>

                    <td>it-IT</td>
                    <td>意大利 -意大利</td>

                    <td>it-CH</td>
                    <td>意大利 -瑞士</td>
                  </tr>
                  <tr>
                    <td>ja</td>
                    <td>日本</td>

                    <td>ja-JP</td>
                    <td>日本 -日本</td>

                    <td>kn</td>
                    <td>卡纳达语</td>
                  </tr>
                  <tr>
                    <td>kn-IN</td>
                    <td>卡纳达语 -印度</td>

                    <td>kk</td>
                    <td>Kazakh</td>

                    <td>kk-KZ</td>
                    <td>Kazakh-哈萨克</td>
                  </tr>
                  <tr>
                    <td>kok</td>
                    <td>Konkani</td>

                    <td>kok-IN</td>
                    <td>Konkani-印度</td>

                    <td>ko</td>
                    <td>韩国</td>
                  </tr>
                  <tr>
                    <td>ko-KR</td>
                    <td>韩国 -韩国</td>

                    <td>ky</td>
                    <td>Kyrgyz</td>

                    <td>ky-KZ</td>
                    <td>Kyrgyz-哈萨克</td>
                  </tr>
                  <tr>
                    <td>lv</td>
                    <td>拉脱维亚</td>

                    <td>lv-LV</td>
                    <td>拉脱维亚的 -拉脱维亚</td>

                    <td>lt</td>
                    <td>立陶宛</td>
                  </tr>
                  <tr>
                    <td>lt-LT</td>
                    <td>立陶宛 -立陶宛</td>

                    <td>mk</td>
                    <td>马其顿</td>

                    <td>mk-MK</td>
                    <td>马其顿 -FYROM</td>
                  </tr>
                  <tr>
                    <td>ms</td>
                    <td>马来</td>

                    <td>ms-BN</td>
                    <td>马来 -汶莱</td>

                    <td>ms-MY</td>
                    <td>马来 -马来西亚</td>
                  </tr>
                  <tr>
                    <td>mr</td>
                    <td>马拉地语</td>

                    <td>mr-IN</td>
                    <td>马拉地语 -印度</td>

                    <td>mn</td>
                    <td>蒙古</td>
                  </tr>
                  <tr>
                    <td>mn-MN</td>
                    <td>蒙古 -蒙古</td>

                    <td>no</td>
                    <td>挪威</td>

                    <td>nb-NO</td>
                    <td>挪威 (Bokm?l) - 挪威</td>
                  </tr>
                  <tr>
                    <td>nn-NO</td>
                    <td>挪威 (Nynorsk)- 挪威</td>

                    <td>pl</td>
                    <td>波兰</td>

                    <td>pl-PL</td>
                    <td>波兰 -波兰</td>
                  </tr>
                  <tr>
                    <td>pt</td>
                    <td>葡萄牙</td>

                    <td>pt-BR</td>
                    <td>葡萄牙 -巴西</td>

                    <td>pt-PT</td>
                    <td>葡萄牙 -葡萄牙</td>
                  </tr>
                  <tr>
                    <td>pa</td>
                    <td>Punjab 语</td>

                    <td>pa-IN</td>
                    <td>Punjab 语 -印度</td>

                    <td>ro</td>
                    <td>罗马尼亚语</td>
                  </tr>
                  <tr>
                    <td>ro-RO</td>
                    <td>罗马尼亚语 -罗马尼亚</td>

                    <td>ru</td>
                    <td>俄国</td>

                    <td>ru-RU</td>
                    <td>俄国 -俄国</td>
                  </tr>
                  <tr>
                    <td>sa</td>
                    <td>梵文</td>

                    <td>sa-IN</td>
                    <td>梵文 -印度</td>

                    <td>sr-SP-Cyrl</td>
                    <td>塞尔维亚 -(西里尔字母的) 塞尔</td>
                  </tr>
                  <tr>
                    <td>sr-SP-Latn</td>
                    <td>塞尔维亚 (拉丁文)- 塞尔维亚共</td>

                    <td>sk</td>
                    <td>斯洛伐克</td>

                    <td>sk-SK</td>
                    <td>斯洛伐克 -斯洛伐克</td>
                  </tr>
                  <tr>
                    <td>sl</td>
                    <td>斯洛文尼亚</td>

                    <td>sl-SI</td>
                    <td>斯洛文尼亚 -斯洛文尼亚</td>

                    <td>es</td>
                    <td>西班牙</td>
                  </tr>
                  <tr>
                    <td>es-AR</td>
                    <td>西班牙 -阿根廷</td>

                    <td>es-BO</td>
                    <td>西班牙 -玻利维亚</td>

                    <td>es-CL</td>
                    <td>西班牙 -智利</td>
                  </tr>
                  <tr>
                    <td>es-CO</td>
                    <td>西班牙 -哥伦比亚</td>

                    <td>es-CR</td>
                    <td>西班牙 - 哥斯达黎加</td>

                    <td>es-DO</td>
                    <td>西班牙 - 多米尼加共和国</td>
                  </tr>
                  <tr>
                    <td>es-EC</td>
                    <td>西班牙 -厄瓜多尔</td>

                    <td>es-SV</td>
                    <td>西班牙 - 萨尔瓦多</td>

                    <td>es-GT</td>
                    <td>西班牙 -危地马拉</td>
                  </tr>
                  <tr>
                    <td>es-HN</td>
                    <td>西班牙 -洪都拉斯</td>

                    <td>es-MX</td>
                    <td>西班牙 -墨西哥</td>

                    <td>es-NI</td>
                    <td>西班牙 -尼加拉瓜</td>
                  </tr>
                  <tr>
                    <td>es-PA</td>
                    <td>西班牙 -巴拿马</td>

                    <td>es-PY</td>
                    <td>西班牙 -巴拉圭</td>

                    <td>es-PE</td>
                    <td>西班牙 -秘鲁</td>
                  </tr>
                  <tr>
                    <td>es-PR</td>
                    <td>西班牙 - 波多黎各</td>

                    <td>es-ES</td>
                    <td>西班牙 -西班牙</td>

                    <td>es-UY</td>
                    <td>西班牙 -乌拉圭</td>
                  </tr>
                  <tr>
                    <td>es-VE</td>
                    <td>西班牙 -委内瑞拉</td>

                    <td>sw</td>
                    <td>Swahili</td>

                    <td>sw-KE</td>
                    <td>Swahili-肯尼亚</td>
                  </tr>
                  <tr>
                    <td>sv</td>
                    <td>瑞典</td>

                    <td>sv-FI</td>
                    <td>瑞典 -芬兰</td>

                    <td>sv-SE</td>
                    <td>瑞典 -瑞典</td>
                  </tr>
                  <tr>
                    <td>syr</td>
                    <td>Syriac</td>

                    <td>syr-SY</td>
                    <td>Syriac-叙利亚共和国</td>

                    <td>ta</td>
                    <td>坦米尔</td>
                  </tr>
                  <tr>
                    <td>ta-IN</td>
                    <td>坦米尔 -印度</td>

                    <td>tt</td>
                    <td>Tatar</td>

                    <td>tt-RU</td>
                    <td>Tatar-俄国</td>
                  </tr>
                  <tr>
                    <td>te</td>
                    <td>Telugu</td>

                    <td>te-IN</td>
                    <td>Telugu-印度</td>

                    <td>th</td>
                    <td>泰国</td>
                  </tr>
                  <tr>
                    <td>th-TH</td>
                    <td>泰国 -泰国</td>

                    <td>tr</td>
                    <td>土耳其语</td>

                    <td>tr-TR</td>
                    <td>土耳其语 -土耳其</td>
                  </tr>
                  <tr>
                    <td>uk</td>
                    <td>乌克兰</td>

                    <td>uk-UA</td>
                    <td>乌克兰 -乌克兰</td>

                    <td>ur</td>
                    <td>Urdu</td>
                  </tr>
                  <tr>
                    <td>ur-PK</td>
                    <td>Urdu-巴基斯坦</td>

                    <td>uz</td>
                    <td>Uzbek</td>

                    <td>uz-UZ-Cyrl</td>
                    <td>Uzbek-(西里尔字母的) 乌兹别克</td>
                  </tr>
                  <tr>
                    <td>uz-UZ-Latn</td>
                    <td>Uzbek(拉丁文)- 乌兹别克斯坦</td>

                    <td>vi</td>
                    <td>越南</td>

                    <td>vi-VN</td>
                    <td>越南 -越南</td>
                  </tr>
                </tbody>
              </table>
              </p>
            </dd>
          </dl>
          <dl class="translate">
            <dd>
              <!--<div class="car"><img src="./img/car.png" /></div>-->
              <div class="day"><img src="./img/day.png" /></div>
              <div class="language-list"></div>
              <a href="./admin/index.html" target="_blank"
                class="admin">翻译管理平台</a>&nbsp;&nbsp;&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="/m.js/m.js.html" target="_blank">M.js</a>
            </dd>
          </dl>
        </div>
      </div>
      <div>
        <footer>
          <h1>版权所有：520internet.com</h1>
          <h2></h2>
          <h3></h3>
          <h4></h4>
          <h5></h5>
          <h6></h6>
        </footer>
      </div>
    </div>
      <div class="background">
        <video src="../../scene/video/night_2.mp4" oncontextmenu="return false;" muted="muted" autoplay="autoplay" loop="loop"></video>
      </div>
  </body>
</html>
